<template>
    <div>
        <van-overlay :show="shopContact"  z-index="2001">
            <div class="shopContact">
                <div class="shopContact-wrap"> 
                    <div class="shopContact-cont">
                        <van-divider :style="{ color: '#000', padding: '0 16px' , borderColor: 'E5E5E5',  fontSize:'14px', fontWeight: '500'}">客服咨询</van-divider>
                        <div class="img-code">
                            <img :src="plugins.shopWechatCode ? $imgUrlHead + plugins.shopWechatCode : require('@/assets/images/kefu.png')" alt="" />
                        </div>
                        <p class="text-cont">请识别图中二维码/微信号</p>    
                        <p class="text-cont">或通过小程序登录系统，联系商家客服</p>
                        <p class="text-wx">{{plugins.shopWechatNum ? plugins.shopWechatNum : '商家暂未设置客服'}}</p>
                        <p class="btn" @click="copyText" :class="plugins.shopWechatNum ? '' : 'error'">一键复制客服微信号</p>
                    </div>

                    <div @click="close" class="needsclick">
                        <img src="@/assets/images/adv-close.png" class="close-img" />
                    </div>
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import {customerService} from 'api/common/common.js'
export default {
    props: {
        shopContact: Boolean
    },
    data() {
        return {
            show: false,
            isTrigger: false,
            plugins: {
                shopWechatCode: '',
                shopWechatNum: ''
            }
        }
    },
    mounted() {
        
    },
    methods: {
        close() {
            this.$emit('update:shopContact', false)
        },

        copyText() {
            if (!this.plugins.shopWechatNum) {
                return
            }

            let that = this

            this.$copyText(`${this.plugins.shopWechatNum}`).then(function (e) {
                that.$toast('复制成功')
            }, function (e) {
                that.$toast('复制失败')
            })

            
        },
    },  

    watch: {
       shopContact(val) {
            
            if (this.isTrigger) return

            customerService().then(res => {

                if (res.status != 1) {
                    this.$toast(res.msg)
                    return
                }

                if (val == true) this.isTrigger = true

                this.plugins = {...res.result}

                
            })
           
       }
    }
}
</script>

<style  scoped>
    .shopContact {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}


.shopContact-cont {
  width:5.08rem;
  /* height:6.12rem; */
  padding: 0.1rem 0.2rem 0.4rem 0.2rem;
  background:rgba(255, 255, 255, 1);
  box-sizing: border-box;
}

.shopContact-cont .img-code {
  display: flex;
  align-content:center;
  justify-content:center;
  width: 2.02rem;
  height: 2.02rem;
  margin: 10px auto;
  text-align: center;
}

.shopContact-cont .img-code img {
  display: block;
  width: 100%;
  height: 100%;
}
.text-cont {
  font-size:12px;
  font-family:Source Han Sans CN;
  font-weight:400;
  color:rgba(153, 153, 153, 1);
  text-align: center;
  margin: 5px 0;
}


.text-wx {
  font-family:Source Han Sans CN;
  font-weight:400;
  text-align: center;
  margin: 10px 0;
  font-size: 18px;
  color:rgba(0, 0, 0, 1);
}

.shopContact-wrap .btn {
  width: 4.44rem;
  height: 0.76rem;
  line-height: 0.76rem;
  background: rgba(46, 130, 228, 1);
  text-align: center;
  margin: auto; 
  color: #fff;
  font-size:12px;
}

.close-img {
  text-align: center;
  display: block;
  width: 30px;
  height: 30px;
  margin: auto;
  margin-top: 20px;
}

.shopContact-wrap .btn.error {
    background:rgba(178,178,178,1);
}

</style>